<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Dashboard</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="noindex">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <!-- Choices CSS-->
    <link rel="stylesheet" href="/static/vendor/choices.js/public/assets/styles/choices.min.css">
    <!-- Custom Scrollbar-->
    <link rel="stylesheet" href="/static/vendor/overlayscrollbars/css/OverlayScrollbars.min.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="/static/css/style.default.premium.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="/static/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="/static/img/favicon.ico">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
    <!-- Side Navbar -->
    <nav class="side-navbar">
      <div class="side-navbar-inner">
        <!-- Sidebar Header    -->
        <div class="sidebar-header d-flex align-items-center justify-content-center p-3 mb-3">
          <!-- User Info-->
          <div class="sidenav-header-inner text-center"><a href="pages-profile.html"><img class="img-fluid rounded-circle avatar mb-2" src="img/avatar-7.jpg" alt="person"></a>
            <h2 class="h5 text-white text-uppercase mb-0">Nathan Andrews</h2>
            <p class="text-sm mb-0 text-muted">Web Developer</p>
          </div>
          <!-- Small Brand information, appears on minimized sidebar--><a class="brand-small text-center" href="index.html">
            <p class="h1 m-0">BD</p></a>
        </div>
        <!-- Sidebar Navigation Menus--><span class="text-uppercase text-gray-500 text-sm fw-bold letter-spacing-0 mx-lg-2 heading">Main</span>
        <ul class="list-unstyled">                  
          <li class="sidebar-item"><a class="sidebar-link" href="index.html"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#real-estate-1"> </use>
              </svg>Home </a></li>
          <li class="sidebar-item active"><a class="sidebar-link" href="#formsDropdown" aria-expanded="aria-expanded" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#survey-1"> </use>
              </svg>Forms </a>
            <ul class="collapse list-unstyled show" id="formsDropdown">
              <li class="active"><a class="sidebar-link" href="forms.html">Basic forms</a></li>
              <li><a class="sidebar-link" href="forms-advanced.html">Advanced forms</a></li>
              <li><a class="sidebar-link" href="forms-autocomplete.html">Autocomplete</a></li>
              <li><a class="sidebar-link" href="forms-dropzone.html">Files upload</a></li>
              <li><a class="sidebar-link" href="forms-texteditor.html">Text editor</a></li>
              <li><a class="sidebar-link" href="forms-validation.html">Validation</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#chartsDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#sales-up-1"> </use>
              </svg>Charts </a>
            <ul class="collapse list-unstyled " id="chartsDropdown">
              <li><a class="sidebar-link" href="charts.html">Charts</a></li>
              <li><a class="sidebar-link" href="charts-gauge-sparkline.html">Gauge + Sparkline</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#tablesDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#portfolio-grid-1"> </use>
              </svg>Tables </a>
            <ul class="collapse list-unstyled " id="tablesDropdown">
              <li><a class="sidebar-link" href="tables.html">Bootstrap tables</a></li>
              <li><a class="sidebar-link" href="tables-datatable.html">Datatable</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#componentsDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#stack-1"> </use>
              </svg>Components </a>
            <ul class="collapse list-unstyled " id="componentsDropdown">
              <li><a class="sidebar-link" href="components-cards.html">Cards</a></li>
              <li><a class="sidebar-link" href="components-calendar.html">Calendar</a></li>
              <li><a class="sidebar-link" href="components-gallery.html">Gallery</a></li>
              <li><a class="sidebar-link" href="components-loading-buttons.html">Loading buttons</a></li>
              <li><a class="sidebar-link" href="components-map.html">Maps</a></li>
              <li><a class="sidebar-link" href="components-notifications.html">Notifications</a></li>
              <li><a class="sidebar-link" href="components-preloader.html">Preloaders</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#pagesDropdown" data-bs-toggle="collapse"> 
              <svg class="svg-icon svg-icon-sm svg-icon-heavy me-2">
                <use xlink:href="#multiple-windows-1"> </use>
              </svg>Pages </a>
            <ul class="collapse list-unstyled " id="pagesDropdown">
              <li><a class="sidebar-link" href="pages-contacts.html">Contacts</a></li>
              <li><a class="sidebar-link" href="pages-invoice.html">Invoice</a></li>
              <li><a class="sidebar-link" href="login.html">Login page</a></li>
              <li><a class="sidebar-link" href="login-2.html">Login v.2 <span class="badge bg-info">New</span></a></li>
              <li><a class="sidebar-link" href="pages-profile.html">Profile</a></li>
              <li><a class="sidebar-link" href="pages-pricing.html">Pricing table</a></li>
            </ul>
          </li>
          <li class="sidebar-item"><a class="sidebar-link" href="#!"> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#imac-screen-1"> </use>
              </svg>Demo
              <div class="badge bg-warning">6 New</div></a></li>
        </ul><span class="text-uppercase text-gray-500 text-sm fw-bold letter-spacing-0 mx-lg-2 heading">Second menu</span>
        <ul class="list-unstyled py-4">
          <li class="sidebar-item"> <a class="sidebar-link" href="#!"> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#chart-1"> </use>
              </svg>Demo</a></li>
          <li class="sidebar-item"> <a class="sidebar-link" href="">
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#imac-screen-1"> </use>
              </svg>Demo
              <div class="badge bg-info">Special</div></a></li>
          <li class="sidebar-item"> <a class="sidebar-link" href=""> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#quality-1"> </use>
              </svg>Demo</a></li>
          <li class="sidebar-item"> <a class="sidebar-link" href=""> 
              <svg class="svg-icon svg-icon-xs svg-icon-heavy me-2">
                <use xlink:href="#security-shield-1"> </use>
              </svg>Demo</a></li>
        </ul>
      </div>
    </nav>
    <div class="page">
      <!-- navbar-->
      <header class="header mb-5 pb-3">
        <nav class="nav navbar fixed-top">
          <div class="container-fluid">
            <div class="d-flex align-items-center justify-content-between w-100">
              <div class="d-flex align-items-center"><a class="menu-btn d-flex align-items-center justify-content-center p-2 bg-gray-900" id="toggle-btn" href="#">
                  <svg class="svg-icon svg-icon-sm svg-icon-heavy text-white">
                    <use xlink:href="#menu-1"> </use>
                  </svg></a><a class="navbar-brand ms-2" href="index.html">
                  <div class="brand-text d-none d-md-inline-block text-uppercase letter-spacing-0"><span class="text-white fw-normal text-xs">Bootstrap </span><strong class="text-primary text-sm">Dashboard</strong></div></a></div>
              <ul class="nav-menu mb-0 list-unstyled d-flex flex-md-row align-items-md-center">
                <!-- Notifications dropdown-->
                <li class="nav-item dropdown"> <a class="nav-link text-white position-relative" id="notifications" rel="nofollow" data-bs-target="#" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                      <use xlink:href="#chart-1"> </use>
                    </svg><span class="badge bg-warning">12</span></a>
                  <ul class="dropdown-menu dropdown-menu-end mt-sm-3 shadow-sm" aria-labelledby="notifications">
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-blue">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#envelope-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">You have 6 new messages </span><small class="small text-gray-600">4 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-green">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#chats-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">New 2 WhatsApp messages</span><small class="small text-gray-600">4 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-orange">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#checked-window-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">Server Rebooted</span><small class="small text-gray-600">8 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item py-3" href="#!"> 
                        <div class="d-flex">
                          <div class="icon icon-sm bg-green">
                            <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                              <use xlink:href="#chats-1"> </use>
                            </svg>
                          </div>
                          <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-xs text-gray-600">New 2 WhatsApp messages</span><small class="small text-gray-600">10 minutes ago</small></div>
                        </div></a></li>
                    <li><a class="dropdown-item all-notifications text-center" href="#!"> <strong class="text-xs text-gray-600">view all notifications                                            </strong></a></li>
                  </ul>
                </li>
                <!-- Messages dropdown-->
                <li class="nav-item dropdown"> <a class="nav-link text-white position-relative" id="messages" rel="nofollow" data-bs-target="#" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                      <use xlink:href="#envelope-1"> </use>
                    </svg><span class="badge bg-info">10</span></a>
                  <ul class="dropdown-menu dropdown-menu-end mt-sm-3 shadow-sm" aria-labelledby="messages">
                    <li><a class="dropdown-item d-flex py-3" href="#!"> <img class="img-fluid rounded-circle flex-shrink-0 avatar shadow-0" src="img/avatar-1.jpg" alt="..." width="45">
                        <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-sm text-gray-600">Jason Doe</span><small class="small text-gray-600"> Sent You Message</small>
                          <p class="mb-0 small text-gray-600">3 days ago at 7:58 pm - 10.06.2014</p>
                        </div></a></li>
                    <li><a class="dropdown-item d-flex py-3" href="#!"> <img class="img-fluid rounded-circle flex-shrink-0 avatar shadow-0" src="img/avatar-2.jpg" alt="..." width="45">
                        <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-sm text-gray-600">Jason Doe</span><small class="small text-gray-600"> Sent You Message</small>
                          <p class="mb-0 small text-gray-600">3 days ago at 7:58 pm - 10.06.2014</p>
                        </div></a></li>
                    <li><a class="dropdown-item d-flex py-3" href="#!"> <img class="img-fluid rounded-circle flex-shrink-0 avatar shadow-0" src="img/avatar-3.jpg" alt="..." width="45">
                        <div class="ms-3"><span class="h6 d-block fw-normal mb-1 text-sm text-gray-600">Jason Doe</span><small class="small text-gray-600"> Sent You Message</small>
                          <p class="mb-0 small text-gray-600">3 days ago at 7:58 pm - 10.06.2014</p>
                        </div></a></li>
                    <li><a class="dropdown-item text-center" href="#!"> <strong class="text-xs text-gray-600">Read all messages       </strong></a></li>
                  </ul>
                </li>
                <!-- Languages dropdown    -->
                <li class="nav-item dropdown"><a class="nav-link dropdown-toggle text-white text-sm" id="languages" rel="nofollow" data-bs-target="#" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="img/flags/16/GB.png" alt="English"><span class="d-none d-sm-inline-block ms-2">English</span></a>
                  <ul class="dropdown-menu dropdown-menu-end mt-sm-3 shadow-sm" aria-labelledby="languages">
                    <li><a class="dropdown-item" rel="nofollow" href="#!"> <img class="me-2" src="img/flags/16/DE.png" alt="English"><span>German</span></a></li>
                    <li><a class="dropdown-item" rel="nofollow" href="#!"> <img class="me-2" src="img/flags/16/FR.png" alt="English"><span>French                                                         </span></a></li>
                  </ul>
                </li>
                <!-- Log out-->
                <li class="nav-item"><a class="nav-link text-white text-sm ps-0" href="login.html"> <span class="d-none d-sm-inline-block">Logout</span>
                    <svg class="svg-icon svg-icon-xs svg-icon-heavy">
                      <use xlink:href="#security-1"> </use>
                    </svg></a></li>
              </ul>
            </div>
          </div>
        </nav>
      </header>
      <!-- Breadcrumb-->
      <div class="bg-gray-200 text-sm">
        <div class="container-fluid">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0 py-3">
              <li class="breadcrumb-item"><a class="fw-light" href="index.html">Home</a></li>
              <li class="breadcrumb-item active fw-light" aria-current="page">Forms  </li>
            </ol>
          </nav>
        </div>
      </div>
      <!-- Page Header-->
      <header class="py-4">
        <div class="container-fluid py-2">
          <h1 class="h3 fw-normal mb-0">Forms</h1>
        </div>
      </header>
      <!-- Forms Section-->
      <section class="pb-5"> 
        <div class="container-fluid">
          <div class="row">
            <!-- Basic Form-->
            <div class="col-lg-6">
              <div class="card">
                <div class="card-header border-bottom">
                  <h3 class="h4 mb-0">Basic Form</h3>
                </div>
                <div class="card-body">
                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur.</p>
                  <form>
                    <div class="mb-3">
                      <label class="form-label" for="exampleInputEmail1">Email address</label>
                      <input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp">
                      <div class="form-text" id="emailHelp">We'll never share your email with anyone else.</div>
                    </div>
                    <div class="mb-3">
                      <label class="form-label" for="exampleInputPassword1">Password</label>
                      <input class="form-control" id="exampleInputPassword1" type="password">
                    </div>
                    <button class="btn btn-primary" type="submit">Submit</button>
                  </form>
                </div>
              </div>
            </div>
            <!-- Horizontal Form-->
            <div class="col-lg-6">
              <div class="card">
                <div class="card-header border-bottom">
                  <h3 class="h4 mb-0">Horizontal Form</h3>
                </div>
                <div class="card-body">
                  <p class="text-sm">Lorem ipsum dolor sit amet consectetur.</p>
                  <form class="form-horizontal">
                    <div class="row gy-2 mb-4">
                      <label class="col-sm-3 form-label" for="inputHorizontalElOne">Email</label>
                      <div class="col-sm-9">
                        <input class="form-control" id="inputHorizontalElOne" type="email" placeholder="Email Address"><small class="form-text">Example help text that remains unchanged.</small>
                      </div>
                    </div>
                    <div class="row gy-2 mb-4">
                      <label class="col-sm-3 form-label" for="inputHorizontalElTwo">Password</label>
                      <div class="col-sm-9">
                        <input class="form-control" id="inputHorizontalElTwo" type="password" placeholder="Pasword"><small class="form-text">Example help text that remains unchanged.</small>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-sm-9 ms-auto">
                        <input class="btn btn-primary" type="submit" value="Signin">
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- Inline Form-->
            <div class="col-lg-8">                           
              <div class="card">
                <div class="card-header border-bottom">
                  <h3 class="h4 mb-0">Inline Form</h3>
                </div>
                <div class="card-body">
                  <form class="row g-3 align-items-center">
                    <div class="col-lg">
                      <label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
                      <div class="input-group">
                        <div class="input-group-text">@</div>
                        <input class="form-control" id="inlineFormInputGroupUsername" type="text" placeholder="Username">
                      </div>
                    </div>
                    <div class="col-lg">
                      <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
                      <select class="form-select" id="inlineFormSelectPref">
                        <option selected>Choose...</option>
                        <option value="1">One</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                      </select>
                    </div>
                    <div class="col-lg">
                      <button class="btn btn-primary" type="submit">Submit</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- Modal Form-->
            <div class="col-lg-4">
              <div class="card">
                <div class="card-header border-bottom">
                  <h3 class="mb-0">Signin Modal</h3>
                </div>
                <div class="card-body text-center">
                  <button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#myModal">Form in simple modal </button>
                  <!-- Modal-->
                  <div class="modal fade text-start" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="myModalLabel">Modal Form</h5>
                          <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                          <p>Lorem ipsum dolor sit amet consectetur.</p>
                          <form>
                            <div class="mb-3">
                              <label class="form-label" for="modalInputEmail1">Email address</label>
                              <input class="form-control" id="modalInputEmail1" type="email" aria-describedby="emailHelp">
                              <div class="form-text" id="emailHelp">We'll never share your email with anyone else.</div>
                            </div>
                            <div class="mb-3">
                              <label class="form-label" for="modalInputPassword1">Password</label>
                              <input class="form-control" id="modalInputPassword1" type="password">
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
                          <button class="btn btn-primary" type="button">Save changes</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Form Elements -->
            <div class="col-lg-12">
              <div class="card">
                <div class="card-header border-bottom">
                  <h3 class="h4 mb-0">All form elements</h3>
                </div>
                <div class="card-body">
                  <form class="form-horizontal">
                    <div class="row">
                      <label class="col-sm-3 form-label">Normal</label>
                      <div class="col-sm-9">
                        <input class="form-control" type="text">
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Help text</label>
                      <div class="col-sm-9">
                        <input class="form-control" type="text"><small class="form-text">A block of help text that breaks onto a new line and may extend beyond one line.</small>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Password</label>
                      <div class="col-sm-9">
                        <input class="form-control" type="password" name="password">
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Placeholder</label>
                      <div class="col-sm-9">
                        <input class="form-control" type="text" placeholder="placeholder">
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Disabled</label>
                      <div class="col-sm-9">
                        <input class="form-control" type="text" disabled="" placeholder="Disabled input here...">
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Checkboxes &amp; radios </label>
                      <div class="col-sm-9">
                        <div class="form-check">
                          <input class="form-check-input" id="defaultCheck0" type="checkbox">
                          <label class="form-check-label" for="defaultCheck0">Option one</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" id="defaultCheck1" type="checkbox" checked>
                          <label class="form-check-label" for="defaultCheck1">Option two checked</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" id="defaultCheck2" type="checkbox" checked disabled>
                          <label class="form-check-label" for="defaultCheck2">Option three checked and disabled</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" id="defaultCheck3" type="checkbox" disabled>
                          <label class="form-check-label" for="defaultCheck3">Option four disabled</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" id="defaultRadio0" type="radio" name="exampleRadios">
                          <label class="form-check-label" for="defaultRadio0">Option one</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" id="defaultRadio1" type="radio" name="exampleRadios" checked>
                          <label class="form-check-label" for="defaultRadio1">Option two checked</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" id="defaultRadio2" type="radio" name="exampleRadios" checked disabled>
                          <label class="form-check-label" for="defaultRadio2">Option three checked and disabled</label>
                        </div>
                        <div class="form-check">
                          <input class="form-check-input" id="defaultRadio3" type="radio" name="exampleRadios" disabled>
                          <label class="form-check-label" for="defaultRadio3">Option four disabled</label>
                        </div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Select</label>
                      <div class="col-sm-9">
                        <select class="form-select mb-3" name="account">
                          <option>option 1</option>
                          <option>option 2</option>
                          <option>option 3</option>
                          <option>option 4</option>
                        </select>
                      </div>
                      <div class="col-sm-9 offset-sm-3">
                        <select class="form-select" multiple="">
                          <option>option 1</option>
                          <option>option 2</option>
                          <option>option 3</option>
                          <option>option 4</option>
                        </select>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label" for="formFile">File input</label>
                      <div class="col-sm-9">
                        <input class="form-control" id="formFile" type="file">
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Input with success</label>
                      <div class="col-sm-9">
                        <input class="form-control is-valid" type="text">
                        <div class="valid-feedback">Looks good!</div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Input with error</label>
                      <div class="col-sm-9">
                        <input class="form-control is-invalid" type="text">
                        <div class="invalid-feedback">Please provide your name.</div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Control sizing</label>
                      <div class="col-sm-9">
                        <input class="form-control form-control-lg mb-3" type="text" placeholder=".input-lg">
                        <input class="form-control mb-3" type="text" placeholder="Default input">
                        <input class="form-control form-control-sm mb-3" type="text" placeholder=".input-sm">
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Column sizing</label>
                      <div class="col-sm-9">
                        <div class="row">
                          <div class="col-md-3">
                            <input class="form-control" type="text" placeholder=".col-md-3">
                          </div>
                          <div class="col-md-4">
                            <input class="form-control" type="text" placeholder=".col-md-4">
                          </div>
                          <div class="col-md-5">
                            <input class="form-control" type="text" placeholder=".col-md-5">
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"> </div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Material Inputs</label>
                      <div class="col-sm-9">
                        <div class="input-material-group mb-3">
                          <input class="input-material" id="register-username" type="text" name="registerUsername" required value="Jason Doe">
                          <label class="label-material" for="register-username">Username</label>
                        </div>
                        <div class="input-material-group mb-3">
                          <input class="input-material" id="register-email" type="email" name="registerEmail" required>
                          <label class="label-material" for="register-email">Email Address      </label>
                        </div>
                        <div class="input-material-group mb-3">
                          <input class="input-material" id="register-password" type="password" name="registerPassword" required>
                          <label class="label-material" for="register-password">Password     </label>
                        </div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Input groups</label>
                      <div class="col-sm-9">
                        <div class="input-group mb-3"><span class="input-group-text" id="basic-addon1">@</span>
                          <input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        </div>
                        <div class="input-group mb-3">
                          <input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2"><span class="input-group-text" id="basic-addon2">@</span>
                        </div>
                        <div class="input-group mb-3">
                          <div class="input-group-text">
                            <input class="form-check-input mt-0" type="checkbox" aria-label="Checkbox for following text input">
                          </div>
                          <input class="form-control" type="text" aria-label="Text input with checkbox">
                        </div>
                        <div class="input-group mb-3">
                          <input class="form-control" type="text" aria-label="Text input with radio button">
                          <div class="input-group-text">
                            <input class="form-check-input mt-0" type="radio" aria-label="Radio button for following text input">
                          </div>
                        </div>
                        <div class="input-group mb-3"><span class="input-group-text">$</span><span class="input-group-text">0.00</span>
                          <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)">
                        </div>
                        <div class="input-group">
                          <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)"><span class="input-group-text">$</span><span class="input-group-text">0.00</span>
                        </div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">Button addons</label>
                      <div class="col-sm-9">
                        <div class="input-group mb-3">
                          <button class="btn btn-primary" id="button-addon1" type="button">Button</button>
                          <input class="form-control" type="text" placeholder aria-label="Example text with button addon" aria-describedby="button-addon1">
                        </div>
                        <div class="input-group">
                          <input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
                          <button class="btn btn-primary" id="button-addon2" type="button">Button</button>
                        </div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <label class="col-sm-3 form-label">With dropdowns</label>
                      <div class="col-sm-9">
                        <div class="input-group">
                          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
                          <ul class="dropdown-menu shadow-sm">
                            <li><a class="dropdown-item" href="#!">Action</a></li>
                            <li><a class="dropdown-item" href="#!">Another action</a></li>
                            <li><a class="dropdown-item" href="#!">Something else here</a></li>
                            <li><a class="dropdown-item" href="#!">Separated link</a></li>
                          </ul>
                          <input class="form-control" type="text" aria-label="Text input with dropdown button">
                        </div>
                      </div>
                    </div>
                    <div class="border-bottom my-5 border-gray-200"></div>
                    <div class="row">
                      <div class="col-sm-9 ms-auto">
                        <button class="btn btn-secondary" type="reset">Cancel</button>
                        <button class="btn btn-primary" type="submit">Save changes</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <footer class="main-footer w-100 position-absolute bottom-0 start-0 py-2" style="background: #222">
        <div class="container-fluid">
          <div class="row text-center gy-3">
            <div class="col-sm-6 text-sm-start">
              <p class="mb-0 text-sm text-gray-600">Your company &copy; 2017-2023</p>
            </div>
            <div class="col-sm-6 text-sm-end">
              <p class="mb-0 text-sm text-gray-600">Version 2.1.1</p>
            </div>
          </div>
        </div>
      </footer>
    </div>
    <button class="btn btn-primary btn-sm d-none d-md-inline-block" type="button" data-bs-toggle="collapse" data-bs-target="#style-switch" id="style-switch-button"><i class="fas fa-cog fa-2x"></i></button>
    <div class="collapse" id="style-switch">
      <h5 class="mb-3">Select theme colour</h5>
      <form class="mb-3">
        <select class="form-select" name="colour" id="colour">
          <option value="">select colour variant</option>
          <option value="css/style.default.premium.css">green</option>
          <option value="css/style.red.premium.css">red</option>
          <option value="css/style.violet.premium.css">violet</option>
          <option value="css/style.pink.premium.css">pink</option>
          <option value="css/style.sea.premium.css">sea</option>
          <option value="css/style.blue.premium.css">blue</option>
        </select>
      </form>
      <p><img class="img-fluid" src="img/template-mac.png" alt=""></p>
      <p class="text-muted text-xs">Stylesheet switching is done via JavaScript and can cause a blink while page loads. This will not happen in your production code.</p>
    </div>
    <!-- JavaScript files-->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/chart.js/Chart.min.js"></script>
    <script src="vendor/just-validate/js/just-validate.min.js"></script>
    <script src="vendor/choices.js/public/assets/scripts/choices.min.js"></script>
    <script src="vendor/overlayscrollbars/js/OverlayScrollbars.min.js"></script>
    <script src="js/demo.js"> </script>
    <!-- Main File-->
    <script src="js/front.js"></script>
    <script>
      // ------------------------------------------------------- //
      //   Inject SVG Sprite - 
      //   see more here 
      //   https://css-tricks.com/ajaxing-svg-sprite/
      // ------------------------------------------------------ //
      function injectSvgSprite(path) {
      
          var ajax = new XMLHttpRequest();
          ajax.open("GET", path, true);
          ajax.send();
          ajax.onload = function(e) {
          var div = document.createElement("div");
          div.className = 'd-none';
          div.innerHTML = ajax.responseText;
          document.body.insertBefore(div, document.body.childNodes[0]);
          }
      }
      // this is set to BootstrapTemple website as you cannot 
      // inject local SVG sprite (using only 'icons/orion-svg-sprite.svg' path)
      // while using file:// protocol
      // pls don't forget to change to your domain :)
      injectSvgSprite('icons/orion-svg-sprite.svg'); 
      
      
    </script>
    <!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  </body>
</html>